<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Grid</title>
<link rel="stylesheet/less" type="text/css" href="../src/less/index.less" />
<script src="js/less.min.js" type="text/javascript"></script>
<style>
.demo-block{background:#FFF;}
[class*="kui-col-"],.kui-tiled>*{box-shadow:inset 1px 1px .5px rgba(153,153,153,.3); text-align:center;}
</style>
</head>

<body>
<div class="kui-page">
	<div class="kui-header">
		<div class="pull-left icon-left app-back" onClick="history.back()">返回</div>
		<h1 class="kui-title">Grid</h1>
	</div>
	<div class="kui-content">
		<div class="Mg">float删格，适合多行</div>
		<ul class="demo-block kui-row kui-1px-rb Mg">
			<li class="kui-col-50">50</li>
			<li class="kui-col-50">50</li>
			<li class="kui-col-25">25</li>
			<li class="kui-col-75">75</li>
			<li class="kui-col-33">33</li>
			<li class="kui-col-67">67</li>
			<li class="kui-col-20">20</li>
			<li class="kui-col-80">80</li>
			<li class="kui-col-10">10</li>
			<li class="kui-col-90">90</li>
		</ul>
		<div class="Mg">Flex栅格</div>
		<div class="demo-block kui-1px-rb Mg">
			<div class="kui-row-flex">
				<div class="kui-col-1">平均分</div>
				<div class="kui-col-1">平均分</div>
				<div class="kui-col-1">平均分</div>
				<div class="kui-col-1">平均分</div>
			</div>
			<div class="kui-row-flex">
				<div class="kui-col-2">2/3</div>
				<div class="kui-col-1">1/3</div>
			</div>
			<div class="kui-row-flex">
				<div class="kui-col-3">3/4</div>
				<div class="kui-col-1">1/4</div>
			</div>
			<div class="kui-row-flex">
				<div class="kui-col-4">4/5</div>
				<div class="kui-col-1">1/5</div>
			</div>
			<div class="kui-row-flex">
				<div class="kui-col-3">3/5</div>
				<div class="kui-col-2">2/5</div>
			</div>
		</div>
		<div class="Mg">Flex栅格(垂直)</div>
		<div class="demo-block kui-1px-rb Mg">
			<div class="kui-row-flex kui-row-flex-ver" style="height:200px;">
				<div class="kui-col-1">平均分</div>
				<div class="kui-col-1">平均分</div>
				<div class="kui-col-1">平均分</div>
				<div class="kui-col-1">平均分</div>
			</div>
		</div>
	</div>
</div>
</body>
</html>
